.ranking-box, .desk-box {
  height: 100%;
  -webkit-transition: 1s;
  transition: 1s;
}

.desk-box {
  padding-top: 1.5625rem;
}

.diy-box {
  padding-top: 0.78125rem;
}

.box {
  height: 24.375rem;
  width: 13.75rem;
  padding: 0.78125rem 0.625rem 0;
  margin: 0 auto;
  overflow-y: scroll;
}

.box.now-zoom {
  overflow: hidden;
}

.box .wrapper-big, .box .wrapper {
  position: relative;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  text-align: center;
  z-index: 1;
}

.box .wrapper-big .center, .box .wrapper .center {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  display: inline-block;
  text-align: center;
  background: #e7c598;
  border-radius: 50%;
  box-shadow: 1px 1px 1px black;
}

.box .wrapper-big .center span, .box .wrapper .center span {
  color: #bf0c21;
  font-weight: bold;
}

.box .wrapper-big .circle, .box .wrapper .circle {
  position: absolute;
  color: #bf0c21;
  border-radius: 50%;
  background: #e7c598 no-repeat center/cover;
  box-shadow: 1px 1px 1px black;
  overflow: hidden;
}

.box .wrapper-big .circle .icon-yonghu, .box .wrapper .circle .icon-yonghu {
  display: block;
  border-radius: 50%;
}

.box .wrapper-big .circle i, .box .zoom-in .circle i {
  -webkit-animation: rock 2s infinite;
  animation: rock 2s infinite;
}

.box .wrapper-big {
  width: 5.9375rem;
  height: 5.9375rem;
  margin: 0 auto;
}

.box .wrapper-big .center {
  width: 3.75rem;
  height: 3.75rem;
  line-height: 3.75rem;
}

.box .wrapper-big .center span {
  font-size: 0.75rem;
}

.box .wrapper-big .circle {
  width: 1.375rem;
  height: 1.375rem;
  line-height: 1.375rem;
}

.box .wrapper-big .circle .icon-yonghu {
  font-size: 0.625rem;
}

.box .wrapper {
  width: 4.21875rem;
  height: 4.21875rem;
  line-height: 4.21875rem;
  margin: 0.8125rem 0;
}

.box .wrapper .center {
  width: 2.65625rem;
  height: 2.65625rem;
  line-height: 2.65625rem;
}

.box .wrapper .center span {
  font-size: 0.625rem;
}

.box .wrapper .circle {
  width: 1.09375rem;
  height: 1.09375rem;
  line-height: 1.09375rem;
}

.box .wrapper .circle .icon-yonghu {
  font-size: 0.4375rem;
}

.box .wrapper .icon-jia1 {
  font-size: 1.5625rem;
  color: #bf0c21;
}

.box .wrapper-now .icon-yonghu {
  -webkit-animation: rock 1.5s linear infinite;
  animation: rock 1.5s linear infinite;
}

.box .wrapper:nth-child(2n) {
  float: left;
}

.box .wrapper:nth-child(2n+1) {
  float: right;
}

.word {
  margin-top: 1.03125rem;
  text-align: center;
  font-size: 0.8125rem;
  color: #e7c598;
  -webkit-transition: 0.75s;
  transition: 0.75s;
}

.word p {
  font-weight: 600;
}

.word p em {
  display: inline-block;
  width: 1.5625rem;
  color: #ff6400;
  vertical-align: bottom;
  border-bottom: 1px solid white;
}

#way3-pop .pop_box .pop_up, #way3-tips-pop .pop_box .pop_up, #dissatisfy-pop .pop_box .pop_up {
  padding: 3.125rem 0.3125rem;
}

#way3-pop .pop_box .pop_up p, #way3-tips-pop .pop_box .pop_up p, #dissatisfy-pop .pop_box .pop_up p {
  font-size: 0.875rem;
  font-weight: 600;
}

#way3-pop .pop_box .pop_up p em, #way3-tips-pop .pop_box .pop_up p em, #dissatisfy-pop .pop_box .pop_up p em {
  display: inline-block;
  width: 2.8125rem;
  color: #ff6400;
  vertical-align: bottom;
  border-bottom: 1px solid #bf0c21;
}

.word_tips {
  position: absolute;
  bottom: 4.6875rem;
  left: 50%;
  -webkit-transform: translateX(-50%);
  transform: translateX(-50%);
  width: 13.75rem;
  color: #e7c598;
  font-size: 0.9375rem;
  font-weight: 600;
  text-align: center;
}

.word_tips em {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  color: #ff6400;
  vertical-align: bottom;
  border-bottom: 1px solid white;
}

.word_tips em:first-child {
  width: 2.1875rem;
}

.zoom-out {
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
}

.tp-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: transparent;
  -webkit-transition: 0.5s;
  transition: 0.5s;
  -webkit-transform-origin: center 80%;
  transform-origin: center 80%;
}

.wrap_bg, .wrap_bg2, .small_bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 7;
  background: transparent;
}

.active_ani {
  -webkit-animation: none !important;
  animation: none !important;
  color: #bf0c21 !important;
}

@-webkit-keyframes rock {
  10% {
    -webkit-transform: rotate3d(0, 0, 1, 25deg);
    transform: rotate3d(0, 0, 1, 25deg);
  }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, -25deg);
    transform: rotate3d(0, 0, 1, -25deg);
  }
  30% {
    -webkit-transform: rotate3d(0, 0, 1, 20deg);
    transform: rotate3d(0, 0, 1, 20deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -20deg);
    transform: rotate3d(0, 0, 1, -20deg);
  }
  50%, 100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}

@keyframes rock {
  10% {
    -webkit-transform: rotate3d(0, 0, 1, 25deg);
    transform: rotate3d(0, 0, 1, 25deg);
  }
  20% {
    -webkit-transform: rotate3d(0, 0, 1, -25deg);
    transform: rotate3d(0, 0, 1, -25deg);
  }
  30% {
    -webkit-transform: rotate3d(0, 0, 1, 20deg);
    transform: rotate3d(0, 0, 1, 20deg);
  }
  40% {
    -webkit-transform: rotate3d(0, 0, 1, -20deg);
    transform: rotate3d(0, 0, 1, -20deg);
  }
  50%, 100% {
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
    transform: rotate3d(0, 0, 1, 0deg);
  }
}
